import React from 'react';
import {Button, Card, Col, Flex, Row, Space} from "antd";
import {Link, useLocation, useNavigate} from "react-router-dom";
import { OutboundDeliveryOrder } from 'type/OutboundDeliveryOrder';
import LogFactory from "log/LogFactory";
import {MATHEMATICAL_PRECISION} from "constant/Common";

import OdoHandler from "../OdoHandler";
import {OdoTypeKey} from "../init";
import "./OdoDetailsComponent.css"
const log = LogFactory.getLog("OdoDetailsComponent");
const OdoDetailsComponent = () => {
    const odo = useLocation().state as OutboundDeliveryOrder;

    const navigate = useNavigate();
    log.debug("odo",odo);

    // if (!odo){
    //     return <Card title={"出库单详情"}>没有找到出库单</Card>
    // }
    return (
        <Card style={{minWidth: "600px"}} title={"出库单详情"} extra={<Link to={".."}>出库单列表</Link>}>
            <Flex justify={"space-between"}>
                <Button>修改出库单</Button>
                <Button>删除出库单</Button>
            </Flex>
            <div className={"odo-desc-content"}>
                <h4 style={{textAlign: "center", fontSize: "26px",margin: "10px"}}>零件出库单</h4>
                <Flex justify={"space-between"}>
                    <Flex>
                        <Space className={"odo-private-font"}>客户名称</Space>
                        {odo.odoFlow}
                    </Flex>
                    <Flex>
                        {OdoHandler.getInstance().odoTypeRender(odo.odoType as OdoTypeKey)}
                    </Flex>
                    <Flex>
                        <Space className={"odo-private-font"}>编号</Space>
                        <span>ODO-{odo.id}</span>
                    </Flex>
                </Flex>
                <hr/>

                <Flex style={{margin: "10px 5px"}} gap={5} vertical={true}>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库零件编号</Col>
                        <Col className={"odo-desc-text"} span={12}>P-{odo.partId}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库单标识</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.key.toUpperCase()}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>零件名称</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.partName}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>零件图号</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.partFigureNumber}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>零件编号</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.partSerialNumber}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库零件价格</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.odoPrice / MATHEMATICAL_PRECISION} 元</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库零件数量</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.odoSize}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库描述</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.odoDesc}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>零件出库后剩余库存</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.residualInventory}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库单排序</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.order}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库单创建时间</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.createTime.toString()}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库修改时间</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.updateTime.toString()}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库单备注信息</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.remark}</Col>
                    </Row>
                    <Row className={"odo-desc-container"}>
                        <Col className={"odo-desc-title"} span={10}>出库单创建人</Col>
                        <Col className={"odo-desc-text"} span={12}>{odo.odoOperator}</Col>
                    </Row>
                </Flex>
                <hr/>
                <Flex justify={"space-between"}>
                    <Flex>
                        <Space className={"odo-private-font"}>最终出库时间</Space>
                        <Space>{odo.odoTime}</Space>
                    </Flex>
                    <Flex>
                        <Space className={"odo-private-font"}>合计金额</Space>
                        <Space>{odo.odoAmount}</Space>
                    </Flex>
                </Flex>
            </div>
        </Card>
    );
};

export default OdoDetailsComponent;